<template>
    <div class="NewsPageBg">
      <div class="ClickBtnRow">
        <div>
          <el-button type="primary" @click="getListPage">查询</el-button>
        </div>
      </div>
      <div class="ListBg">
        <el-table :data="state.list" style="width: 100%">
          <!-- <el-table-column prop="corporate_name" label="单位" /> -->
          <el-table-column prop="user_name" label="联系人" align="center" />
          <el-table-column prop="phone" label="联系方式" align="center" />
          <el-table-column prop="email" label="邮箱" align="center" />
          <el-table-column prop="create_date" label="创建时间" align="center" />
          <el-table-column label="操作" align="center" min-width="40" fixed="right">
            <template #default="{row}">
              <el-button link type="primary" @click="openPage(row)">查看</el-button>
              <!-- <el-button link type="primary" @click="deleteRow(row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="state.total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.limit"
          @pagination="getListPage"
        />
      </div>
      
  
      <!-- 查看 -->
      <ElDrawer v-model="drawer" :z-index="2000" direction="ltr" size="60%">
        <div class="label" style="width: 700px; ">
          联系人
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="listInfo.user_name" placeholder="" />
          </div>
        </div>
        <div class="label" style="width: 700px; ">
          联系方式
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="listInfo.phone" placeholder="" />
          </div>
        </div>
        <div class="label" style="width: 700px; ">
          邮箱
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="listInfo.email" placeholder="" />
          </div>
        </div>
  
        <div class="label" style="width: 700px; ">
          留言内容
          <div class="selectInput" style="width: 620px;">
            <el-input v-model="listInfo.notes" placeholder="" :autosize="{ minRows: 2, maxRows: 5 }" type="textarea" />
          </div>
        </div>
      </ElDrawer>
    </div>
  </template>
  
  <script setup>

    import {messageGetlist} from '@/api/userMessage/index.js'

    import { ElMessage } from 'element-plus'
    import UploadFile from "element-plus";
    import { getToken } from "@/utils/auth";
  
    import WangEditor from '@/components/WangEditor/index.vue'
  
  
  // import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
  // 获取文件上传token
  const hasToken = getToken();
  const Headers = {
    Authorization: hasToken ? hasToken : "",
  };
  
  const AddOrModify = ref(false);
  
  const state = reactive({
    total: 0,
    list: [],
  });
  
  const introduction_banner = ref("");
  
  
  const editValue = ref("");
  
  
  const title = ref("");
  
  const introduction = ref("");
  
  const drawer = ref(false);
  
  
  const queryParams = ref({
    limit: 10,
    page: 1,
  });
  

  const listInfo = ref({})

  const openPage = (row) =>{
    drawer.value = true
    listInfo.value = row
    console.log(listInfo);
    
  }
  
  // 删除新闻
  const deleteRow = (row) => {
    console.log(row);
    const deleteParams = {
      id: row.id,
    };
    deleteProduct(deleteParams).then((res) => {
      if (res.code == 20000) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getListPage();
      }
    });
  };

  // 获取列表
  const getListPage = async () => {
    const data = await messageGetlist(queryParams.value);
    console.log(data);
    state.list = data.data;
    state.total = data.total;
  };
  
  const reset = () =>{
    queryParams.value = {
      limit: 10,
      page: 1,
    };
    getListPage()
  }
  
  // 初始化
  onMounted(() => {
    getListPage();
  });
  </script>
  
  <style lang="scss" scoped>
  .NewsPageBg {
    width: 100%;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    background-color: rgb(250, 250, 250);
    .label {
      display: flex;
      width: 320px;
      align-items: center;
      margin-top: 12px;
      margin-left: 12px;
      justify-content: space-between;
      .selectInput {
        width: 280px;
      }
    }
  
    .wangEditor {
      width: 98%;
    }
  
    .ClickBtnRow {
      width: 98%;
      margin-top: 12px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .ListBg {
      width: 98%;
      margin-top: 12px;
      margin-left: auto;
      margin-right: auto;
      height: 630px;
    }
  }
  </style>